
<style scoped>
.bigBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.banner {
    position: sticky;
    top: 0px;
    width: 100%;
}


.container {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    min-width: 660px;
    justify-content: center;
    align-items: flex-start;

}

.error {
    top: -70px;
    width: 300px;
    position: absolute;
}

.login {
    width: 670px;
    height: 450px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 1;
    /* border-radius: 10px; */
    box-shadow: 0px 0px 10px 0.2px #aaa;
}

.header {
    height: 26%;
    /* background-color: pink; */
    width: 100%;
    margin-bottom: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header img {
    height: 50%;
}

.write {
    width: 100%;
}

input[type="text"],
input[type="password"] {
    width: 68%;
    padding: 2.1%;
    padding-left: 3%;
    height: 2.5%;
    box-sizing: content-box;
    background-color: rgba(241, 242, 246);
    border: 0px;
    border-radius: 10px;
    font-size: 1.1em;
    font-family: Source Han Sans CN;
    outline: none;
}

input[type="text"] {
    margin-bottom: 5%;
}

input[type="checkbox"] {
    margin-left: 10%;
    transform: scale(1.2)
}

.loginForm {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.autoLogin {
    margin-top: 2%;
    margin-bottom: 2%;
    width: 100%;
    box-sizing: content-box;
    font-size: 1em;
    padding-left: 6%;
    font-family: Source Han Sans CN;
    color: #707070
}

.autoLogin input {
    margin-right: 2%;
}

button {
    width: 69%;
    padding: 2.1%;
    box-sizing: content-box;
    border-radius: 10px;
    background-color: rgba(132, 147, 166);
    font-size: 1.2em;
    height: 2.5%;
    margin-top: 2%;
    font-family: Source Han Sans CN;
}

.otherChoice {
    display: flex;
    justify-content: space-between;
    margin-top: 2%;
    width: 65%;
    font-size: 1.07em;
    font-family: Source Han Sans CN;
    color: #707070
}

.pic {
    background-image: url(/src/assets/images/index/login/login.png);
    background-size: 86%;
    width: 443px;
    height: 41%;
    position: absolute;
    left: 0.4%;
    bottom: 0%;
    z-index: 0;
    background-repeat: no-repeat;
}
</style>
<template>
    <banner class="banner" :nowPage="nowPage" />
    <div class="bigBox">
        <div class="container">
        <el-alert title="登陆失败" type="error" show-icon :closable="false" v-show="controlEle.error" class="error" />
        <el-alert title="请输入正确格式的邮箱和手机号码" type="error" show-icon :closable="false" v-show="controlEle.errorFor" class="error" />
        <div class="login">
            <div class="header">
                <img src="/src/assets/images/index/logo.svg" alt="无法显示">
            </div>
            <div class="write">
                <form class="loginForm" name="login">
                    <input type="text" name="email" placeholder="邮箱/手机号" v-model="formData.account">
                    <input type="password" name="password" placeholder="密码" v-model="formData.password"
                        @keyup.enter.nativebn="submit">
                </form>
                <div class="autoLogin">
                    <input type="checkbox" name="autoLogin" id="autoLogin" v-model="autoLogin">自动登录
                </div>
            </div>
            <el-button type="info" @click="submit">登 录</el-button>
            <div class="otherChoice">
                <RouterLink to="/findPassword" style="color: #707070">忘记密码</RouterLink>
                <RouterLink to="/register" style="color: #707070">注册账户</RouterLink>
            </div>
        </div>
    </div>
    </div>
    <div class="pic"></div>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { setUserData} from '../../utils/index.js'
import banner from '/src/components/Banner.vue'
import axios from 'axios'
import { onBeforeRouteLeave, useRouter } from 'vue-router';
const router = useRouter();
const controlEle = reactive({
    error: false,
    loading: false,
    errorFor: false
})
const formData = reactive({
    account: '',
    password: '',
})
const nowPage = ref(1);
const autoLogin = ref();        //获得是否自动登录

watch(() => autoLogin.value, (newVal) => { console.log(newVal); })

// 登陆失败提醒
const showHint = function (con) {
    if(con == 'err'){
        controlEle.error = true
        setTimeout(()=>{
            controlEle.error = false
    }, 5000)
    }else if(con == 'loading'){
        controlEle.loading = true
        setTimeout(()=>{
            controlEle.loading = false
    }, 5000)
    }else{
        controlEle.errorFor = true
        setTimeout(()=>{
            controlEle.errorFor = false
    }, 5000)
    }
}

const submit = function () {
    const userData = {
        account: formData.account,
        password: formData.password
    }
    console.log(JSON.stringify(userData));
    const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    const regEma = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

    if(regTel.test(formData.account) || regEma.test(formData.account)){      //里面写正则表达式
        
    }else{
        showHint('errFor')
        return false 
    }
    axios({
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        method: 'post',
        url: 'http://api.linwine.space/api/sjk/login/direct',
        data: JSON.stringify(userData),
        timeout: 7000,
        responseType: "json",
        onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
            showHint('loading')
  },
    }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
            //设置自动登录
            let userData = data.data.data;
            userData.autoLogin = autoLogin.value;
            setUserData(userData)
            if (data.data.data.role == 1) {         //去学生端
                window.location.href='../../../student.html'
            }
            else if (data.data.data.role == 2) {        //去老师端
                window.location.href='../../../teacher.html#/MyCourse'
            }
            else if(data.data.data.role == 3){          //去系主任端
                window.location.href="../../../departmentHead.html#/ManageTeacher"
            }
            else if(data.data.data.role == 4){      //去院级管理员端
                window.location.href="../../../college-administrator.html"
            }
            else if(data.data.data.role == 5){                   //去校级管理员端

            }
            else if(data.data.data.role == 10){ //超级管理员
                window.location.href="../../../super-administrator.html#/school_administrator"
            }
        }
        else if(data.data.code == 400){
            console.log(data.data.code);
            showHint('err');
        }
    }).catch((data) => {
        showHint('err');
    })
}

onMounted(() => {
    document.querySelector('body').setAttribute('style', 'background:linear-gradient( 90deg, rgb(241, 242, 246) 50%, rgb(219, 221, 227) 50%);')
})
onBeforeRouteLeave(() => {
    document.querySelector('body').removeAttribute('style')
})
</script>